<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>React 项目 第三天 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/react_54/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/react_54/assets/css/0.styles.bb734bc1.css" as="style"><link rel="preload" href="/react_54/assets/js/app.238b6045.js" as="script"><link rel="preload" href="/react_54/assets/js/2.aab467b1.js" as="script"><link rel="preload" href="/react_54/assets/js/8.8de02009.js" as="script"><link rel="prefetch" href="/react_54/assets/js/10.43c4975e.js"><link rel="prefetch" href="/react_54/assets/js/11.81b9dc32.js"><link rel="prefetch" href="/react_54/assets/js/12.4b436566.js"><link rel="prefetch" href="/react_54/assets/js/13.d7cc0a07.js"><link rel="prefetch" href="/react_54/assets/js/14.d4865720.js"><link rel="prefetch" href="/react_54/assets/js/15.dd96af22.js"><link rel="prefetch" href="/react_54/assets/js/16.a5df321b.js"><link rel="prefetch" href="/react_54/assets/js/17.8fc24c74.js"><link rel="prefetch" href="/react_54/assets/js/18.eed208cb.js"><link rel="prefetch" href="/react_54/assets/js/19.b719f9e7.js"><link rel="prefetch" href="/react_54/assets/js/20.2674521c.js"><link rel="prefetch" href="/react_54/assets/js/21.4687691e.js"><link rel="prefetch" href="/react_54/assets/js/22.5e24fb2c.js"><link rel="prefetch" href="/react_54/assets/js/23.26e52045.js"><link rel="prefetch" href="/react_54/assets/js/24.741d4743.js"><link rel="prefetch" href="/react_54/assets/js/25.736f0762.js"><link rel="prefetch" href="/react_54/assets/js/3.ff3dc391.js"><link rel="prefetch" href="/react_54/assets/js/4.17db1609.js"><link rel="prefetch" href="/react_54/assets/js/5.6327af75.js"><link rel="prefetch" href="/react_54/assets/js/6.9d7574a9.js"><link rel="prefetch" href="/react_54/assets/js/7.1195917d.js"><link rel="prefetch" href="/react_54/assets/js/9.7acde14f.js">
    <link rel="stylesheet" href="/react_54/assets/css/0.styles.bb734bc1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/react_54/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/react_54/react/base/01-DAY" class="sidebar-heading clickable"><span>React基础</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/react_54/react/base/01-DAY.html" class="sidebar-link">React介绍 了解</a></li><li><a href="/react_54/react/base/02-DAY.html" class="sidebar-link">事件</a></li><li><a href="/react_54/react/base/03-DAY.html" class="sidebar-link">组件传值</a></li><li><a href="/react_54/react/base/04-DAY.html" class="sidebar-link">局部样式</a></li><li><a href="/react_54/react/base/05-DAY.html" class="sidebar-link">Redux</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/react_54/react/project/00-DAY" class="sidebar-heading clickable open"><span>React项目</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/react_54/react/project/01-DAY.html" class="sidebar-link">React 项目 第一天</a></li><li><a href="/react_54/react/project/02-DAY.html" class="sidebar-link">React 项目 第二天</a></li><li><a href="/react_54/react/project/03-DAY.html" aria-current="page" class="active sidebar-link">React 项目 第三天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/react_54/react/project/03-DAY.html#react-项目-第三天" class="sidebar-link">React 项目 第三天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/react_54/react/project/03-DAY.html#页面效果" class="sidebar-link">页面效果</a></li><li class="sidebar-sub-header"><a href="/react_54/react/project/03-DAY.html#业务逻辑" class="sidebar-link">业务逻辑</a></li><li class="sidebar-sub-header"><a href="/react_54/react/project/03-DAY.html#接口" class="sidebar-link">接口</a></li><li class="sidebar-sub-header"><a href="/react_54/react/project/03-DAY.html#关键技术" class="sidebar-link">关键技术</a></li><li class="sidebar-sub-header"><a href="/react_54/react/project/03-DAY.html#右侧字母列表" class="sidebar-link">右侧字母列表</a></li></ul></li></ul></li><li><a href="/react_54/react/project/04-DAY.html" class="sidebar-link">React 项目 第四天 第五天</a></li><li><a href="/react_54/react/project/06-DAY.html" class="sidebar-link">React 项目 第六天</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/react_54/mianshi/baodian01" class="sidebar-heading clickable"><span>面试宝典</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/react_54/mianshi/baodian01.html" class="sidebar-link">工作宝典</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="react-项目-第三天"><a href="#react-项目-第三天" class="header-anchor">#</a> React 项目 第三天</h2> <h3 id="页面效果"><a href="#页面效果" class="header-anchor">#</a> 页面效果</h3> <p><img src="/react_54/assets/img/image-20200226155748259.c5800c6b.png" alt="image-20200226155748259"></p> <h3 id="业务逻辑"><a href="#业务逻辑" class="header-anchor">#</a> 业务逻辑</h3> <ol><li>使用ant-design 框架 的<a href="https://mobile.ant.design/components/nav-bar-cn/" target="_blank" rel="noopener noreferrer">Navbar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>组件实现顶部的返回栏</li> <li>获取页面的城市数据
<ol><li>从redux中获取当前城市</li> <li>从接口中获取热门城市</li> <li>从接口中获取所有城市</li></ol></li> <li>排序，构造成符合要求的数组数据格式</li> <li>使用 react-virtualized 组件实现长列表渲染</li> <li>构造右侧字母列表 实现点击激活和列表切换</li> <li>长列表滚动，字母列表跟着切换</li></ol> <h3 id="接口"><a href="#接口" class="header-anchor">#</a> 接口</h3> <ol><li><p>获取热门城市</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>area<span class="token operator">/</span>hot
</code></pre></div></li> <li><p>获取所有城市</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>area<span class="token operator">/</span>city<span class="token operator">?</span>level<span class="token operator">=</span><span class="token number">1</span>
</code></pre></div></li></ol> <h3 id="关键技术"><a href="#关键技术" class="header-anchor">#</a> 关键技术</h3> <h4 id="navbar组件的使用"><a href="#navbar组件的使用" class="header-anchor">#</a> <a href="https://mobile.ant.design/components/nav-bar-cn/" target="_blank" rel="noopener noreferrer">NavBar组件的使用<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h4> <h4 id="构造满足条件的数据"><a href="#构造满足条件的数据" class="header-anchor">#</a> 构造满足条件的数据</h4> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">[</span>
  <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;当前城市&quot;</span><span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;广州&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;热门城市&quot;</span><span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;广州&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;北京&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;上海&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;深圳&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;安庆&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;北海&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;北京&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;宝鸡&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre></div><h4 id="react-virtualized-可视区域渲染"><a href="#react-virtualized-可视区域渲染" class="header-anchor">#</a> <a href="https://github.com/bvaughn/react-virtualized" target="_blank" rel="noopener noreferrer">react-virtualized 可视区域渲染<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h4> <ul><li>原理：只渲染页面可视区域的列表项，非可视区域的数据“完全不渲染”，在滚动列表时动态更新列表项</li> <li>使用场景：一次性展示大量数据的情况（比如：大表格、微博、聊天应用等）</li></ul> <p><img src="/react_54/assets/img/1567392165425.a24394c9.png" alt="img"></p> <p>使用：</p> <ol><li><p>安装</p> <div class="language-js extra-class"><pre class="language-js"><code>yarn add react<span class="token operator">-</span>virtualized
</code></pre></div></li> <li><p>引入</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-virtualized'</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>代码</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-virtualized'</span><span class="token punctuation">;</span>

<span class="token comment">// List data as an array of strings</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">'Brian Vaughn'</span>
  <span class="token comment">// And so on...</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">rowRenderer</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  key<span class="token punctuation">,</span>         <span class="token comment">// 行数组中的唯一键</span>
  index<span class="token punctuation">,</span>       <span class="token comment">// 集合中的行索引</span>
  isScrolling<span class="token punctuation">,</span> <span class="token comment">// 该列表目前正在滚动</span>
  isVisible<span class="token punctuation">,</span>   <span class="token comment">// 这一行在列表中是可见的(例如它不是一个超扫描行)</span>
  style        <span class="token comment">//要应用于行的样式对象</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
      <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>key<span class="token punctuation">}</span></span>
      <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token punctuation">{</span>list<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// Render your list</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List</span></span>
    <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">300</span><span class="token punctuation">}</span></span> 
    <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">300</span><span class="token punctuation">}</span></span>
    <span class="token attr-name">rowCount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>list<span class="token punctuation">.</span>length<span class="token punctuation">}</span></span>
    <span class="token attr-name">rowHeight</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span></span>
    <span class="token attr-name">rowRenderer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>rowRenderer<span class="token punctuation">}</span></span>
  <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>
  document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example'</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>自动设置 <code>List</code> 高度 <a href="https://bvaughn.github.io/react-virtualized/#/components/AutoSizer" target="_blank" rel="noopener noreferrer">Autosizer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">AutoSizer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> height<span class="token punctuation">,</span> width <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List</span></span>
        <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>height<span class="token punctuation">}</span></span>
        <span class="token attr-name">rowCount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>list<span class="token punctuation">.</span>length<span class="token punctuation">}</span></span>
        <span class="token attr-name">rowHeight</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span></span>
        <span class="token attr-name">rowRenderer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>rowRenderer<span class="token punctuation">}</span></span>
        <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>width<span class="token punctuation">}</span></span>
      <span class="token punctuation">/&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">AutoSizer</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">,</span>
</code></pre></div></li></ol> <h3 id="右侧字母列表"><a href="#右侧字母列表" class="header-anchor">#</a> 右侧字母列表</h3> <ol><li><p>构造数组</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token string">&quot;#&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;HOT&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;C&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;D&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;F&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;G&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;H&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;J&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;K&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;L&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;M&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;N&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;Q&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;S&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;T&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;W&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;X&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;Y&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;Z&quot;</span><span class="token punctuation">]</span>
</code></pre></div></li> <li><p>定位贴在右侧（注意优先级）</p></li> <li><p>点击触发事件</p> <ol><li><p><a href="https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#scrolltorow-index-number" target="_blank" rel="noopener noreferrer">List.scrollToRow(index)<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 结合 非受控表单</p></li> <li><p>设置 <code>List</code>的对齐位置</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List</span></span>
    <span class="token attr-name">scrollToAlignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>
</code></pre></div></li> <li><p>在构造函数中 提前计算一下 List 的高度 - 提高滚动的精确度</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">measureAllRows</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/react_54/react/project/02-DAY.html" class="prev">
        React 项目 第二天
      </a></span> <span class="next"><a href="/react_54/react/project/04-DAY.html">
        React 项目 第四天 第五天
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/react_54/assets/js/app.238b6045.js" defer></script><script src="/react_54/assets/js/2.aab467b1.js" defer></script><script src="/react_54/assets/js/8.8de02009.js" defer></script>
  </body>
</html>
